<template>
    <div>

        <el-row>
          <el-col :span="24" style="margin-top: 30px">
              <el-button @click="AddPlan" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">新增</el-button>
              <el-button @click="EditPlan" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">编辑</el-button>
              <el-button @click="flush" style="font-size: 15px ">刷新</el-button>
            <el-dialog title="新增测试计划" :visible.sync="AddPlanDialog" style="width: 850px;left: 18%;" :close-on-click-modal="false" >
                <el-form v-model="Planform"   class="demo-ruleForm" style="text-align: right">
                  <el-form-item label="计划名称:"   prop="env_declare">
                    <el-input style="width:200px;float:left"  type="text" v-model="Planform.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="所属项目:">
                    <el-select style="width:200px;float:left" v-model="Planform.project_id" placeholder="请选择">
                      <el-option
                        v-for="item in selects"
                        :key="item.project_id"
                        :label="item.project_name"
                        :value="item.project_id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="closeForm">取 消</el-button>
                  <el-button type="primary" @click="submit">确 定</el-button>
                </div>
              </el-dialog>
            <el-dialog title="编辑测试计划" :visible.sync="UpdatePlanDialog" style="width: 850px;left: 18%" :close-on-click-modal="false" >
                <el-form v-model="EditEntity" class="demo-ruleForm" style="text-align: right">
                  <el-form-item label="名称:"  prop="env_declare">
                    <el-input style="width:200px;float:left" type="text" v-model="EditEntity.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="项目:" >
                    <el-select v-model="EditEntity.project_id" style="width:200px;float:left" >
                      <el-option
                        v-for="item in selects"
                        :key="item.project_id"
                        :label="item.project_name"
                        :value="item.project_id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="closeForm">取 消</el-button>
                  <el-button type="primary" @click="submit">确 定</el-button>
                </div>
              </el-dialog>
          </el-col>
        </el-row>
      <el-row :gutter="25" style="margin-top: 15px">
        <el-col :span="18" >
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 80%;text-align: center"
            border
            v-model="multipleSelection"
            @selection-change="handleSelectionChange"
            :header-cell-style="{'text-align':'center'}"
            align="center">
            <el-table-column type="selection"  width="55" align="center">
            </el-table-column>
            <el-table-column prop="plan_id" label="ID" width="150" align="center">
            </el-table-column>
            <el-table-column prop="name" label="测试计划名称" width="150" align="center">
            </el-table-column>
            <el-table-column prop="project_name" label="项目名称" align="center">
            </el-table-column>
            <el-table-column  property="delete_flag"  label="是否启用" align="center" width="100" >
              <template slot-scope="scope" >
                <el-switch v-model="scope.row.delete_flag" active-value="0"  inactive-value="1" @change="changStatus($event,scope.row)"  ></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  export default {
        data(){
          return{
            tableData:[],
            multipleSelection: [],
            AddPlanDialog:false,
            UpdatePlanDialog:false,
            Planform:{
              name:'',
              project_name:'',
              project_id: null,
              plan_id:null,
              used:'',
            },
            selects:[],
            EditEntity: {},
          }
        },
      methods:{
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },

        AddPlan:function () {
            this.AddPlanDialog =true;
            this.$axios.post("/config/projectList",{}).then(Response=>{
              this.selects=Response.data.data;
              console.log(this.selects)
            })
        },
        EditPlan:function () {
          let arr = this.multipleSelection;
          this.UpdatePlanDialog =true;
          this.$axios.post("/config/GetPlanById",{
            plan_id:arr[0].plan_id,
          }).then(Response=>{
            this.EditEntity.plan_id=Response.data.data[0].plan_id;
            this.EditEntity.project_name=Response.data.data[0].project_name;
            this.EditEntity.project_id=Response.data.data[0].project_id;
            this.EditEntity.name=Response.data.data[0].name;
          });
          this.$axios.post("/config/projectList",{}).then(Response=>{
            this.selects.push(this.EditEntity);
            console.log(this.selects)
            for(var i=0;i<Response.data.data.length;i++){
              if (Response.data.data[i].project_id==this.EditEntity.project_id){continue;}
              this.selects.push(Response.data.data[i]);
            }
            console.log(this.selects)
          })

        },
        closeForm: function () {
          this.AddPlanDialog = false;
          this.UpdatePlanDialog = false;
          this.selects=[];
          this.EditEntity=[];
          this.$refs.multipleTable.clearSelection();
        },
        submit: function () {
          if (this.Planform.project_id>0){
            this.$axios.post("/config/InsertPlan",
              this.Planform
            ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.mess,
                  duration: 1000
                });
              this.Planform.name="";
              this.Planform.project_name="";
              this.Planform.project_id=null;
              this.AddPlanDialog = false;
            })
          }else {
            this.$notify({
              message: "未选择项目",
              duration: 1000
            });
          }

        },
        flush: function () {
          this.$axios.post("/config/PlanList", {}).then(Response => {
            var data = [];
            for (let i = 0; i < Response.data.data.length; i++) {
              var obj = {};
              obj.name = Response.data.data[i].name;
              obj.project_name = Response.data.data[i].project_name;
              obj.project_id = Response.data.data[i].project_id;
              obj.plan_id = Response.data.data[i].plan_id;
              obj.delete_flag = Response.data.data[i].delete_flag.toString();
              obj.create_time = Response.data.data[i].create_time;
              data[i] = obj;
            }
            this.tableData = data;
          })
        },
        changStatus:function (val,row) {

          var s =row.delete_flag === '0' ? 0 : 1;
          console.log("状态："+s)
          this.$axios.post("/config/DelPlan",{
            delete_flag:s,
            plan_id:row.plan_id,
          }).then(Response=>{
            this.$notify({
              message: Response.data.mess,
              duration: 1000
            });
            })
        }
      },
    created:function () {
      this.flush()
    },

  }
</script>

<style scoped>

</style>
